<template>
	<view>
		
		
		<view class="cardBox" style="margin-top: 0rpx;">
			<view class="flex" style="margin-top: 10rpx;">
				<view class="biao">
					<span class="biao_span">|</span> 
					<text style="font-size: 32rpx;">{{text.afterAppeal}} </text> 
				</view>
			</view>
			<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;">{{text.order_no}} : {{order.orderInfo.order_no}}</view>	
				<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;">{{text.order_type}} : {{order_type}}</view>
			</view>
			
			
			
			<view v-for="(item,index) in appeal_aftertsales" :key="index">
				
				<block v-if="item.aftertsales_type==2">

					<view style="margin-top: 10rpx;" class="cardBox_son" >
						<view class="flex" style="margin-top: 10rpx;">
							<view class="biao">
								<span class="biao_span">|</span> 
								<text style="font-size: 32rpx;">{{text.ReasonAppeal}} </text> 
							</view>
						</view>
						
						<view  style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="item.appeal_description">
							<view style="width: 96%;background-color: #f6f6f6;color: #666; border-radius: 20rpx; padding: 20rpx;margin-left: 2%;">
								<block v-if="lang==='zh'">{{item.appeal_description}}</block>
								<block v-if="lang==='ru'">{{item.appeal_description_ru?item.appeal_description_ru:item.appeal_description}}</block>
							</view>
						</view>
						<view  style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="item.appeal_img&&item.appeal_img.length!=0">
							<image :src="IMAGE_URL+item2" class="order_img" v-for="(item2,index1) in item.appeal_img" :key="index1" style="margin:0rpx 3%;margin-top: 20rpx;float: left;"></image>
							<view style="clear: both;"></view>
						</view>
						<view  style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="item.appeal_file&&item.appeal_file.length!=0">
							<view v-for="(item3,index3) in item.appeal_file" :key="index3"  style="padding: 5px 10px;" class="downLoad" @click="downLoadFile(item3)">
								<text style="color: #008aff;">{{item3.substring(item3.length, item3.length - 20) }}</text>
							</view>
						</view>
						<view  style="margin-top: 10rpx;padding-bottom: 20rpx;" v-if="item.appeal_video&&item.appeal_video.length!=0">
							<view v-for="(item4,index4) in item.appeal_video" :key="index4"  style="margin:0rpx 3%;margin-top: 20rpx;float: left;">
								<video v-if="item4" id="myVideo" :initial-time="0"  autoplay="true" loop="true" style="width: 160px;z-index: 2; margin-left: 0%; height: 160px;"
									:enable-play-gesture="true" object-fit="fill"
									:src="IMAGE_URL+item4"
									:poster="IMAGE_URL+item4 +'?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_640'" objectFit="container">
								</video>
							</view>
							<view style="clear: both;"></view>
						</view>
						<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
							<image :src="IMAGE_URL+order.join_user.avatar" class="close_image2"></image>
							<view style="line-height: 140rpx;float: left;">
								<block v-if="lang==='zh'">{{order.join_user.username}}</block>
								<block v-if="lang==='ru'">{{order.join_user.username_ru}}</block>
							</view>
							<view style="clear: both;"></view>
							
							<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;color: #999;" v-if="item.appeal_time">
								<view style="width: 50%;float: left; text-align: left;" >
									{{timestampToDate(item.appeal_time*1000)}}
								</view>
								<!-- <view v-if="is_time" style="width: 50%;float: right; text-align: right; color: #ff2323;" >
									{{text.automatic_agree}}
								</view> -->
							</view>
							<view style="clear: both;"></view>	
						</view>
					</view>
					
					
					<block v-if="order.user_id!=order.release_user.id">
						<view style="margin-top: 10rpx;" v-if="item.release_status==2&&order.user_id!=order.release_user.id" class="cardBox_son">
							<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
								<image :src="IMAGE_URL+order.release_user.avatar" class="close_image2"></image>
								<view style="line-height: 140rpx;float: left;">
									<block v-if="lang==='zh'">{{order.release_user.username}}</block>
									<block v-if="lang==='ru'">{{order.release_user.username_ru}}</block>
								</view>
								
								<view style="clear: both;"></view>
								<view style="font-size:28rpx;padding-top: 10rpx;">{{text.afterNoAppeal}} </view>
								
								<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;color: #999;">
									<view style="width: 50%;float: left; text-align: left;" >
										{{timestampToDate(item.release_do_time*1000)}}
									</view>
									<!-- <view style="width: 50%;float: right; text-align: right; color: #ff2323;" >
										{{text.automatic_agree}}
									</view> -->
								</view>
								<view style="clear: both;"></view>
									
							</view>
							
							
							<view style="padding-bottom: 20rpx;" v-if="!item.join_do_time&&item.is_publisherApply_edit==0">
								<u-button @click="approve(1,item.id)" style="float: right;margin-right: 10rpx;" :custom-style="customStyle1" hover-class="none" :disabled="subDisabled" type="primary"
									>
									{{ $t('认可') }}
								</u-button>
								<u-button @click="shensu" style="float: right;margin-right: 10rpx;" :custom-style="customStyle11" hover-class="none" :disabled="subDisabled" type="primary"
									>
									{{ $t('再次申诉') }}
								</u-button>
								
								<u-button @click="pingtai" style="float: right;margin-right: 10rpx;" :custom-style="customStyle11" hover-class="none" :disabled="subDisabled" type="primary"
									>
									{{ $t('平台介入') }}
								</u-button>
								
								<view style="clear: both;"></view>
							</view>
						</view>
						
						
						<view style="padding-bottom: 20rpx;width:96%;margin-left: 2%;" v-if="item.release_status==0&&order.user_id!=order.release_user.id">
							<u-button  style="float: right;margin-right: 10rpx;" :custom-style="customStyle3" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('等待对方处理') }}
							</u-button>
							<u-button @click="chexiao(item.id)" style="float: right;margin-right: 10rpx;" :custom-style="customStyle1" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('撤销申请') }}
							</u-button>
							<view style="clear: both;"></view>
						</view>
					</block>
					
					
					<block v-if="order.user_id==order.release_user.id">
						<view v-if="item.release_status==0" style="padding-bottom: 20rpx;">
							<u-button @click="approve_release(1,item.id)" style="float: right;margin-right: 10rpx;" :custom-style="customStyle1" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('认可') }}
							</u-button>
							<u-button @click="approve_release(2,item.id)"  style="float: right;margin-right: 10rpx;" :custom-style="customStyle11" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('不认可') }}
							</u-button>
							
							<view style="clear: both;"></view>
						</view>
						
						<view v-if="item.release_status==2" class="cardBox_son" style="margin-top: 0rpx;">
							<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
								<image :src="IMAGE_URL+order.release_user.avatar" class="close_image2"></image>
								<view style="line-height: 140rpx;float: left;">
									<block v-if="lang==='zh'">{{order.release_user.username}}</block>
									<block v-if="lang==='ru'">{{order.release_user.username_ru}}</block>
								</view>
								<view style="clear: both;"></view>
								<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;">
									{{text.afterNoAppeal}}
								</view>
								<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;color: #999;">
									<view style="width: 50%;float: left; text-align: left;" >
										{{timestampToDate(item.release_do_time*1000)}}
									</view>
									
								</view>
								<view style="clear: both;"></view>	
							</view>
						
							<view v-if="item.is_publisherApply_edit==0&&item.release_status==2&&item.join_do_time==null" style="padding-bottom: 20rpx;width:96%;margin-left: 2%;">
								<u-button  style="float: right;margin-right: 10rpx;" :custom-style="customStyle3" hover-class="none" :disabled="subDisabled" type="primary"
									>
									{{ $t('等待对方处理') }}
								</u-button>
								<u-button  @click="edit" style="float: right;margin-right: 10rpx;" :custom-style="customStyle11" hover-class="none" :disabled="subDisabled" type="primary"
									>
									{{ $t('修改申请') }}
								</u-button>
								<u-button @click="pingtai" style="float: right;margin-right: 10rpx;" :custom-style="customStyle11" hover-class="none" :disabled="subDisabled" type="primary"
									>
									{{ $t('平台介入') }}
								</u-button>
								<view style="clear: both;"></view>
							</view>
						</view>
					</block>
			
				</block>
				
				
				<block v-if="item.aftertsales_type==3">
					
					<view class="cardBox_son" style="margin-top: 10rpx;">
						<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
							<image :src="IMAGE_URL+order.release_user.avatar" class="close_image2"></image>
							<view style="line-height: 140rpx;float: left;">
								<block v-if="lang==='zh'">{{order.release_user.username}}</block>
								<block v-if="lang==='ru'">{{order.release_user.username_ru}}</block>
							</view>
							
							<view style="clear: both;"></view>
							<view style="font-size:28rpx;padding-top: 10rpx;">{{text.afterEdit}} </view>
							
							<view class="flex" style="margin-top: 10rpx;padding-bottom: 20rpx;color: #999;">
								<view style="width: 50%;float: left; text-align: left;" >
									{{timestampToDate(item.release_do_time*1000)}}
								</view>
							</view>
							<view style="clear: both;"></view>
								
						</view>
					</view>
					
					<orderCommon
						:text="text" :order="order" :afterSalesRecord="item" :is_time="false" :is_chat="true" :is_son="1"
						:customStyle1="customStyle1" :customStyle11="customStyle11" 
						:customStyle2="customStyle2" :customStyle3="customStyle3">
					</orderCommon>
				
					<block v-if="order.user_id==item.user_id">
						<view v-if="item.is_publisherApply_edit==0&&item.release_status==2&&item.join_do_time==null" style="padding-bottom: 20rpx;width:96%;margin-left: 2%;">
							<u-button  style="float: right;margin-right: 10rpx;" :custom-style="customStyle3" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('等待对方处理') }}
							</u-button>
							<u-button  @click="edit" style="float: right;margin-right: 10rpx;" :custom-style="customStyle11" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('修改申请') }}
							</u-button>
							<u-button @click="pingtai" style="float: right;margin-right: 10rpx;" :custom-style="customStyle11" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('平台介入') }}
							</u-button>
							<view style="clear: both;"></view>
						</view>
					</block>
					<block  v-if="order.user_id!=item.user_id">
						<view  v-if="item.is_publisherApply_edit==0&&item.release_status==2&&item.join_do_time==null"  style="padding-bottom: 20rpx;">
							<u-button @click="approve(1,item.id)" style="float: right;margin-right: 10rpx;" :custom-style="customStyle1" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('认可') }}
							</u-button>
							<u-button @click="shensu" style="float: right;margin-right: 10rpx;" :custom-style="customStyle11" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('申诉') }}
							</u-button>
							<u-button @click="pingtai" style="float: right;margin-right: 10rpx;" :custom-style="customStyle11" hover-class="none" :disabled="subDisabled" type="primary"
								>
								{{ $t('平台介入') }}
							</u-button>
							
							<view style="clear: both;"></view>
						</view>
					</block>
					
					
				</block>


			</view>
			

		</view>
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	import {
		ImageUrl,
		isVideo,
		time,createC2CConversation
	} from "@/common/public";
	import orderCommon from './orderCommon.vue';
	
	export default {
		components:{
			orderCommon
		},
		props:{
			order:{
				type:Object,
				default:{}
			},
			afterSalesRecord:{
				type:Object,
				default:{}
			},

			text:{
				type:Object,
				default:{}
			},
			customStyle1:{
				type:Object,
				default:{}
			},
			customStyle11:{
				type:Object,
				default:{}
			},
			customStyle2:{
				type:Object,
				default:{}
			},
			customStyle3:{
				type:Object,
				default:{}
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: getApp().globalData.lang,
				
				img:HTTP_IMG_UTL+'huangjin.png',
				subDisabled:false,
				is_time:false,
				order_type:'',
				appeal_aftertsales:[],
				
			}
		},
		mounted(){
			console.log(this.order)
			//goods=货物,transport=运输,crossborder=跨境货代,professional=专业代办
			if(this.order.orderInfo.type=='goods'){
				this.order_type=this.$t('货物')
			}else if(this.order.orderInfo.type=='transport'){
				this.order_type=this.$t('运输')
			}else if(this.order.orderInfo.type=='crossborder'){
				this.order_type=this.$t('跨境货代')
			}else if(this.order.orderInfo.type=='professional'){
				this.order_type=this.$t('专业代办')
			}
			
			if(this.afterSalesRecord.release_status==0){
				this.is_time=true
			}
			this.appeal()
			
		},
		methods:{
			appeal(){
				this.$u.api.order.appealAftertSales({
					aftersales_id : this.order.orderInfo.aftersales_id,
					lang:this.lang
				}).then(res => {
					console.log(res)
					this.appeal_aftertsales=res
				})
			},
			pingtai(){
				this.$u.api.order.platform({
					order_id : this.order.orderInfo.id,
					lang:this.lang
				}).then(res => {
					console.log(res)
				})
				if(this.lang==='zh'){
					createC2CConversation(getApp().globalData.site.im_customer001, this,true)
				}else{
					createC2CConversation(getApp().globalData.site.im_customer002, this,true)
				}
			},
			shensu(){
				this.$emit('change', 'shensu', '');
			},
			downLoadFile(url) {
				const that = this
				uni.showLoading({
					title:"download...",
					mask:true
				})
				console.log('下载链接', this.IMAGE_URL + url)
				var downloadTask = uni.downloadFile({
					url: that.IMAGE_URL + url,
					success(res) {
						uni.hideLoading()
						console.log('tempFilePath', res.tempFilePath)
						const tempFilePath = res.tempFilePath
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: function(file) {
								console.log('file-success', file);
							}
						});
					},
				})
				downloadTask.onProgressUpdate(({progress,totalBytesWritten,totalBytesExpectedToWrite}) => {
					if(progress === 100){
						downloadTask.offProgressUpdate();
					}
				})
			},
			timestampToDate(timestamp) {
			  const date = new Date(timestamp); // 如果timestamp是数值，可以直接作为Date构造函数的参数
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			chat_fabu(mobile){
				createC2CConversation(mobile, this)
			},
			approve(join_status,id){
				const that = this
				var json = {
					join_status: join_status,
					id: id,
					aftersales_id :that.order.orderInfo.aftersales_id,
					lang:that.lang
				}
				that.$u.api.order.approveAppeal(json).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					
					if(join_status==1){
						that.$emit('change3','customer','approve')
					}else{
						setTimeout(function() {
							uni.navigateBack({
								delta: -1
							});
						}, 2000);
					}
				})
			},
			chexiao(id){
				const that = this
				that.$u.api.order.appealRevoke({
					id :id,
					aftersales_id :that.order.orderInfo.aftersales_id,
					lang:that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: -1
						});
					}, 2000);
					return false;
				})
			},
			
			approve_release(release_status,id){
				const that = this
				that.$u.api.order.approveAppeal({
					release_status: release_status,
					id: id,
					aftersales_id :that.order.orderInfo.aftersales_id,
					lang:that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					that.afterSalesRecord2 = res
					that.release_status= res.release_status
					that.release_do_time = res.release_do_time
					
					if(release_status==1){
						that.$emit('change3','customer','approve')
					}else{
						setTimeout(function() {
							uni.navigateBack({
								delta: -1
							});
						}, 2000);
					}
					
					return false;
				})
			},
			
			edit(){
				this.$emit('change2','edit')
			}
		}
	}
</script>

<style lang="scss" scoped>
.cardBox {
	width: 94%;
	margin: 0 auto;
	margin-top: 30rpx;
	box-shadow: 0 0 10px #ddd;
	background: #ddd;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	background: #fff;
	margin-bottom: 30rpx;
	position: relative;
}

.cardBox_son {
	width:100%;
	margin: 0 auto;
	margin-top: 30rpx;
	box-shadow: 0 0 10px #ddd;
	background: #ddd;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	background: #fff;
	margin-bottom: 30rpx;
	position: relative;
}

.flex{width: 100%;display: flex;}
.biao{margin-top: 0rpx; width: 80%; margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;}
.biao_span{color:darkorange ; font-size: 18px; margin-right: 5px;}
.cardTitle{font-size: 24rpx; width: 94%;padding-top: 6rpx;}
.order_img{width: 160rpx;height: 160rpx;border-radius: 20rpx;}
.close_image2{
	width: 120rpx;height: 120rpx;border-radius: 20rpx; margin-right: 20rpx; margin-top: 20rpx; float: left;
}
</style>